<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="less">
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

// 通用的flex居中类
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  .flexCenter();
  background-image: linear-gradient(
    45deg,
    #2c3e50,
    #428e62,
    #2980b9,
    #836360,
    #8e44ad
  );
  background-size: 400%;
  animation: sun 8s infinite;
}
@keyframes sun {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
</style>
